<template>
  <div>
    <el-card class="box-card" shadow="always" style="margin:1px;" :body-style="bodyStyle">
      <div slot="header">
        <span>角色设置</span>
        <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
      </div>
      <div class="headerOperation">
        <div style="float:left;margin-left:10px;">
          <el-input v-model="searchKey" placeholder="请输入你要查找的内容" style="width:200px;margin-right:10px;" />
          <el-button type="primary" @click="handleFilter" @keyup.enter.native="handleFilter">筛选</el-button>
        </div>
        <div style="float:right;margin-right:10px;">
          <el-button type="primary" @click="handleAdd">添加</el-button>
          <el-button type="primary" @click="handleRefresh">刷新</el-button>
        </div>
      </div>
    </el-card>
    <div>
      <el-table :data="productList">
        <el-table-column label="Id" prop="id" />
        <el-table-column label="商品名称" prop="productName" />
        <el-table-column label="价格" prop="price" />
        <el-table-column align="center" label="操作">
          <template slot-scope="{row,$index}">
            <el-button type="primary" @click="handleEdit(row,$index)">编辑</el-button>
            <el-button type="danger" @click="handleDel($index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="收货地址" :visible.sync="dialogFormVisible" @close="handleDialogClose">
        <el-form ref="formDialog" :model="formData">
          <el-form-item label="id" prop="id" :label-width="lableWidth">
            <el-input v-model="formData.id" class="inputWidth" />
          </el-form-item>
          <el-form-item label="商品名称" prop="productName" :label-width="lableWidth">
            <el-input v-model="formData.productName" class="inputWidth" />
          </el-form-item>
          <el-form-item label="价格" prop="price" :label-width="lableWidth">
            <el-input v-model="formData.price" class="inputWidth" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleFormCancel">取 消</el-button>
          <el-button type="primary" @click="handleFormConfirm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// import { getList } from '@/api/product'
export default {
  data() {
    return {
      productList: [],
      searchKey: '',
      dialogFormVisible: false,
      isAddBtnClick: true,
      lableWidth: '20%',
      currentIndex: -1,
      formData: {
        id: 0,
        productName: '',
        price: 0
      },
      bodyStyle: {
        padding: '0px'
      }
    }
  },
  created: function() {
    // this.fetchList()
    this.productList = this.fetchList()
  },
  methods: {
    fetchList: function() {
      var arr = [
        {
          id: 1,
          productName: '三星Note20',
          price: 8900
        },
        {
          id: 2,
          productName: '苹果Iphone 7',
          price: 8900
        },
        {
          id: 3,
          productName: '华为 荣耀 8',
          price: 8900
        }
      ]

      return arr
    },
    handleFilter: function() {
      // console.log(this.searchKey)
      var originList = this.fetchList()
      var list = originList.filter(item => item.productName.indexOf(this.searchKey) >= 0)
      this.productList = list
    },
    handleAdd: function() {
      // this.resetFormFields()
      this.dialogFormVisible = true
      this.isAddBtnClick = true
    },
    handleRefresh: function() {
      this.productList = this.fetchList()
      this.$message.success('刷新成功！')
    },
    handleEdit: function(item, index) {
      this.currentIndex = index
      this.dialogFormVisible = true
      // 编辑的时候，给form赋值需要延后执行，否则重置表单将不生效
      this.$nextTick(() => {
        this.formData = Object.assign({}, item)
      })
      this.isAddBtnClick = false
    },
    handleDel: function(index) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.productList.splice(index, 1)
        this.$message.success('删除成功!')
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    handleFormCancel: function() {
      this.dialogFormVisible = false
      // this.$refs[formName].resetFields()
    },
    handleFormConfirm: function() {
      this.dialogFormVisible = false
      var temp = Object.assign({}, this.formData)
      // this.$refs[formName].resetFields()
      if (this.isAddBtnClick) {
        this.productList.push(temp)
        this.$message.success('增加成功！')
      } else {
        this.productList.splice(this.currentIndex, 1, temp)
        this.$message.success('修改成功！')
      }
    },
    // 对话窗口关闭时 重置表单项
    handleDialogClose: function() {
      this.resetFormFields()
    },
    resetFormFields() {
      this.$refs.formDialog.resetFields()
    }
  }
}
</script>

